<template>
	<div class="content">
		<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
			<el-table-column prop="couponName" label="优惠券名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="amount" label="优惠券面额" show-overflow-tooltip></el-table-column>
			<el-table-column prop="couponStatus" label="优惠券状态" show-overflow-tooltip>
				<template #default="scope">
					<span>
						<el-tag v-if="scope.row.couponStatus == 0" type="info">未使用</el-tag>
						<el-tag v-else-if="scope.row.couponStatus == 1" type="success">已使用</el-tag>
						<el-tag v-else-if="scope.row.couponStatus == 2" type="warning">已过期</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="collectTime" label="领取时间" show-overflow-tooltip></el-table-column>
			<el-table-column prop="usedTime" label="使用时间" show-overflow-tooltip></el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:page-sizes="[10, 15, 20, 30, 50, 100]"
				v-model:current-page="state.tableData.paging.currentPage"
				background
				v-model:page-size="state.tableData.paging.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.paging.totalCount"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { ClientUser } from '/@/api/shop/user';

const state = reactive({
	isToggle: false,
	search: {
		userId: '',
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		paging: {
			currentPage: 1,
			pageSize: 15,
			totalCount: 0,
			totalPages: 0,
		},
	},
});

const onHandleSizeChange = (pageSize: number) => {
	state.tableData.paging.pageSize = pageSize;
	getTableData();
};

// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
	state.tableData.paging.currentPage = currentPage;
	getTableData();
};

const getTableData = async () => {
	const { data } = await ClientUser().search_coupon({
		offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
		limit: state.tableData.paging.pageSize,
		userId: state.search.userId,
	});
	state.tableData.data = data.datas;
	state.tableData.paging.currentPage = data.paging.currentPage;
	state.tableData.paging.totalCount = data.paging.totalCount;
	console.log('data: ', data);
};

const init = (userId: string) => {
	state.search.userId = userId;
	getTableData();
};

defineExpose({ init });
</script>
<style scoped lang="scss"></style>
